<template>
  <div id="app">
    <!-- 01、指令全局注册和局部注册 -->
    <div>
      <h1>自定义指令</h1>
      <!-- <input type="text" ref="inp"> -->
      <input type="text" ref="inp" v-focus />
    </div>
    <!-- 02、自定义指令-指令的值 -->
    <div>
      <h1 v-color="color1">指令的值1测试</h1>
      <h1 v-color="color2">指令的值2测试</h1>
    </div>
    <!-- 03、v-loading指令的封装 -->
    <div>
      <div class="box" v-loading="isLoading">
        <ul>
          <li v-for="item in list" :key="item.id" class="news">
            <div class="left">
              <div class="title">{{ item.title }}</div>
              <div class="info">
                <span>{{ item.source }}</span>
                <span>{{ item.time }}</span>
              </div>
            </div>

            <div class="right">
              <img :src="item.img" alt="" />
            </div>
          </li>
        </ul>
      </div>
      <div class="box2" v-loading="isLoading2"></div>
    </div>
    <!-- 04、插槽 -->
    <div>
      <!-- 2. 在使用组件时，组件标签内填入内容 -->
      <MyDialog>
        <!-- 头部 -->
        <template v-slot:head>
          友情提示
        </template>
        <!-- 内容 -->
        <!-- 具名插槽 的使用：
             需要通过 template 标签包裹需要分发的结构，包成一个整体
         -->
        <template v-slot:content>
          请输入正确的手机号码
        </template>
        <!-- 底部 -->
        <template #footer>
          <button>关闭</button>
        </template>
      </MyDialog>


      <MyDialog>
        <template v-slot:head>
          警告
        </template>
        <template #content>
          你确认要退出吗？
        </template>
        <template #footer>
          <button>取消</button>
          <button>确认</button>
        </template>
      </MyDialog>
    </div>
    <!-- 05、作用域插槽 -->
    <div>
      <MyTable :data="list1">
        <template #default="{ row }">
          <button @click="show(row)">查看</button>
        </template>
      </MyTable>

      <!-- 3. 通过 template #插槽名="变量名" 接收 -->
      <MyTable :data="list2">
        <template #default="obj">
          <!-- <button @click="del(item.id)">删除</button> -->
          <button @click="del(obj.row.id)">删除</button>
        </template>
        
      </MyTable>
    </div>
  </div>
</template>

<script>
// 导入 MyDialog 组件
import MyDialog from './components/MyDialog.vue';
// 导入 MyTable 组件
import MyTable from './components/MyTable.vue';
import axios from 'axios';
export default {
  components:{
    MyDialog,
    MyTable
  },
// 接口地址：http://hmajax.itheima.net/api/news
// 请求方式：get
  data() {
    return {
      color1: "pink",
      color2: "orange",
      list: [],
      // true:盒子处于加载中的状态
      // false：盒子在默认状态，没有loading状态
      isLoading:true,
      isLoading2:true,
      list1: [
        { id: 1, name: '张小花', age: 18 },
        { id: 2, name: '孙大明', age: 19 },
        { id: 3, name: '刘德忠', age: 17 },
          ],
      list2: [
        { id: 1, name: '赵小云', age: 18 },
        { id: 2, name: '刘蓓蓓', age: 19 },
        { id: 3, name: '姜肖泰', age: 17 },
      ]
    };
  },
  methods:{
    // 删除
    del(id) {
      // console.log(id);
      this.list2 = this.list2.filter(item => item.id !== id)
    },
    //查看
    show(row) {
      // console.log(row.name,row.age);
      alert(`姓名：${row.name};年龄：${row.age}`)
    }
  },
  async created () {
    // 1. 发送请求获取数据
    const res = await axios.get('http://hmajax.itheima.net/api/news')
    
    setTimeout(() => {
      // 2. 更新到 list 中，用于页面渲染 v-for
      this.list = res.data.data
      this.isLoading = false
    }, 2000)
  },

  // 3.局部注册指令：只能在当前组件的组件范围内容使用，超出组件范围无效
  directives: {
    // 指令名：指令的配置项
    focus: {
      inserted(el) {
        el.focus();
      },
    },
    // 指令的值
    color: {
      // 1. inserted 提供的是元素被添加到页面中时的逻辑
      inserted(el, binding) {
        // console.log(el);
        // console.log(el,binding);
        el.style.color = binding.value;
      },
      // 2.update 指令的值修改的时候 触发，提供值变化后，dom更新的逻辑
      update(el, binding) {
        el.style.color = binding.value;
      },
    },
    // 注册 loading
    loading:{
      inserted(el,binding){
        binding.value ? el.classList.add('loading'):el.classList.remove('loading')
      },
      update(el,binding){
        binding.value ? el.classList.add('loading'):el.classList.remove('loading')
      }
    }
  },

  // 1-1 先用原始方法
  // mounted() {
  //   this.$refs.inp.focus()
  // }
};
</script>

<style scoped>
.box2 {
  width: 400px;
  height: 400px;
  border: 2px solid red;
  position: relative;
}
.loading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff url('./assets/loading.gif') no-repeat center;
}
.box {
  width: 800px;
  min-height: 500px;
  border: 3px solid orange;
  border-radius: 5px;
  position: relative;
}
.news {
  display: flex;
  height: 120px;
  width: 600px;
  margin: 0 auto;
  padding: 20px 0;
  cursor: pointer;
}
.news .left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 10px;
}
.news .left .title {
  font-size: 20px;
}
.news .left .info {
  color: #999999;
}
.news .left .info span {
  margin-right: 20px;
}
.news .right {
  width: 160px;
  height: 120px;
}
.news .right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
